<template>
    <div class="page-container">
        <Example title="按钮类型">
            <a-space>
                <a-button>Default</a-button>
                <a-button type="primary">Primary</a-button>
                <a-button type="dashed">Dashed</a-button>
                <a-button type="danger">Danger</a-button>
                <a-button type="link">Link</a-button>
            </a-space>
            <a-col style="margin-top: 10px;">
                <a-space>
                    <a-button ghost>Default</a-button>
                    <a-button ghost type="primary">Primary</a-button>
                    <a-button ghost type="dashed">Dashed</a-button>
                    <a-button ghost type="danger">Danger</a-button>
                    <a-button ghost type="link">Link</a-button>
                </a-space>
            </a-col>
        </Example>

        <Example title="不可用">
            <a-space>
                <a-button disabled>Default</a-button>
                <a-button disabled type="primary">Primary</a-button>
                <a-button disabled type="dashed">Dashed</a-button>
                <a-button disabled type="danger">Danger</a-button>
                <a-button disabled type="link">Link</a-button>
            </a-space>
        </Example>

        <Example title="按钮组">
            <a-space>
                <a-button-group>
                    <a-button>Cancel</a-button>
                    <a-button type="primary">Ok</a-button>
                </a-button-group>
                <a-button-group>
                    <a-button icon="left" type="primary">Go back</a-button>
                    <a-button type="primary">
                        Go froward <a-icon type="right" />
                    </a-button>
                </a-button-group>
            </a-space>
        </Example>

        <Example title="block & loading">
            <a-space direction="vertical" style="width: 100%;">
                <a-button block loading>Default</a-button>
                <a-button block type="primary" loading>Primary</a-button>
                <a-button block type="dashed" loading>Dashed</a-button>
                <a-button block type="danger" loading>Danger</a-button>
                <a-button block type="link" loading>Link</a-button>
            </a-space>
        </Example>

        <Example title="形状 & 图标">
            <a-space>
                <a-button shape="circle">
                    <a-icon type="delete" />
                </a-button>
                <a-button shape="round" type="primary">Primary</a-button>
                <a-button shape="circle" type="dashed">
                    <a-icon type="scissor" />
                </a-button>
                <a-button type="danger">
                    <a-icon type="instagram" />Instagram
                </a-button>
                <a-button icon="message" type="link">Link</a-button>
            </a-space>
        </Example>
    </div>
</template>
